import React from "react";
import ReactDOM from 'react-dom';
import classNames from "classnames";
import Queue from "../../utils/LinkedList/Queue/Queue";

export interface MessageOptions {
    content?: React.ReactNode;
    duration?: number;
    onClose?: Function;
}

export interface MessageConfig {
    top?: number,
    maxCount?: number
}

export default class Message {

    private init: boolean = false
    private cfg: MessageConfig = {
        top: 0,
        maxCount: 10
    }
    private existMsgs: Queue<React.RefObject<_Message>> = new Queue<React.RefObject<_Message>>()


    config(cfg: MessageConfig) {
        this.cfg.maxCount = cfg.maxCount && cfg.maxCount > 0 ? cfg.maxCount : 10
        this.cfg.top = typeof cfg.top === 'number' ? cfg.top : 0
        this._config()
    }

    info(options: MessageOptions) {
        if (!this.init) {
            this._config()
        }
        console.log(options)
        const ref = React.createRef<_Message>()
        const dom = (
            <_Message ref={ref} content={options.content} duration={options.duration} onClose={options.onClose} type="info" />
        )
        this.render(dom, ref)
    }

    private render(dom: JSX.Element, ref: React.RefObject<_Message>) {
        let messageContainer: any = document.querySelector('#root .r-msg-box')
        if (messageContainer === null) {
            messageContainer = (
                <div className="r-msg-box"></div>
            )
            ReactDOM.render(
                messageContainer,
                document.getElementById("root")
            );
        }
        while (this.existMsgs.size() >= (this.cfg.maxCount ? this.cfg.maxCount : 10)) {
            //TODO: 销毁多余组件
            this.existMsgs.pop()?.current?.destroy()
        }
        ReactDOM.render(
            dom,
            messageContainer
        );
        this.existMsgs.push(ref)
    }

    private _config() {
        this.init = true
    }

}

interface _MessageOptions {
    className?: string,
    content?: React.ReactNode;
    duration?: number;
    icon?: React.ReactNode,
    onClose?: Function;
    type?: 'info' | 'warn' | 'success';
}

class _Message extends React.Component<_MessageOptions, any> {

    static defaultProps = {
        duration: 3000,
    }

    constructor(props: _MessageOptions) {
        super(props);
        this.state = {
            isAlive: true
        };
    }

    componentDidMount() {
        const duration = (this.props.duration && this.props.duration > 0) ? this.props.duration : 3000
        setTimeout(() => {
            // 销毁组件
            this.destroy()
        }, duration)
    }

    componentWillUnmount() {
        // 如果有 onClose 回调，则进行执行
        if (this.props.onClose) {
            this.props.onClose();
        }
    }

    destroy() {
        this.setState({
            isAlive: false
        })
    }

    render() {
        const {
            content, type, icon
        } = this.props;
        const className = classNames({
            'r-message': true,
            [`r-message-${type}`]: type,
            [`${this.props.className}`]: this.props.className
        })
        return this.state.isAlive && (
            <>
                <div className="r-message-content">
                    <div className={className}>
                        {icon}
                        <span>
                            {content}
                        </span>
                    </div>
                </div>
            </>
        )
    }

}

